<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>添加收货地址</title>
    <link rel="stylesheet" type="text/css" href="../../../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/style.css" />
    <style>
        html,
        body {
            /*background: #fff;*/
        }

        .inner_header {
            font-size: 1.6rem;
            color: #000000;
            font-weight: 600;
            height: 6.9rem;
            margin: 0;
            padding: 2.4rem 0 0 0;
            box-sizing: border-box;
            background: none!important;
            box-shadow: 0rem 0rem 0.8rem 0rem rgba(0, 0, 0, 0.08);
            background: #fff!important;
        }

        .content {
            width: 100%;
            float: left;
            margin: 6.9rem 0 0 0;
        }

        .content_list {
            background: #fff;
            width: 100%;
            float: left;
            box-sizing: border-box;
            padding: 0 0 0 1.3rem;
            margin-bottom: 1reem;
        }

        .content_li {
            width: 100%;
            height: 4.45rem;
            box-sizing: border-box;
            border-bottom: 0.05rem solid #e6e6e6;
            color: #333333;
            font-size: 1.5rem;
            line-height: 4.45rem;
            display: flex;
            text-align: center;
            align-items: center;
        }

        .content_li input {
            line-height: 4.45rem;
            height: 4.45rem;
            flex: 1;
            margin: 0 0 0 2.15rem;
            font-size: 1.5rem;
        }

        input::-webkit-input-placeholder {
            /* placeholder颜色  */
            color: #ccc;
            /* placeholder字体大小 */
            font-size: 1.4rem;
            /* placeholder字间距  */
            letter-spacing: 0rem;
        }

        .content_li img:nth-child(1) {
            width: 0.7rem;
            height: 1.3rem;
            margin-right: 1.3rem;
        }

        .address {
            justify-content: space-between;
            width: 100%;
            height: 4.45rem;
            box-sizing: border-box;
            border-bottom: 0.05rem solid #e6e6e6;
            color: #333333;
            font-size: 1.5rem;
            line-height: 4.45rem;
            display: flex;
            text-align: center;
            align-items: center;
        }

        .only .aui-checkbox {
            width: 1.8rem!important;
            height: 1.8rem!important;
            border-radius: 100%;
            background: #fff;
            margin: 1.3rem 1.3rem 0 1.3rem;
            /*position: relative;*/
            border: 0.1rem solid #999;
        }

        .only .aui-checkbox:checked {
            background: #fc3131;
            border: solid 1px #fc3131;
        }

        .only .aui-checkbox::after {
            width: 1rem!important;
            height: 0.7rem!important;
            margin-top: -0.5rem!important;
            margin-left: -0.5rem!important;
        }

        .only .aui-checkbox::before {
            width: 1rem!important;
            height: 0.7rem!important;
            margin-top: -0.5rem!important;
            margin-left: -0.5rem!important;
        }

        .only {
            border-bottom: 0!important;
            width: 100%;
            height: 4.45rem;
            box-sizing: border-box;
            border-bottom: 0.05rem solid #e6e6e6;
            color: #333333;
            font-size: 1.5rem;
            line-height: 4.45rem;
        }

        .two {
            margin-bottom: 1rem;
        }

        .content_li .onbox {
            width: 4.45rem;
            height: 2.75rem;
            background-color: #ccc;
            border-radius: 1.38rem;
            margin-right: 1.3rem;
        }

        .onbox2 {
            width: 4.45rem;
            height: 2.75rem;
            background-color: #f60;
            border-radius: 1.38rem;
            margin-right: 1.3rem;
        }

        .content_li .onbox .zreo {
            border-radius: 50%;
            width: 2.45rem;
            height: 2.45rem;
            background-color: white;
            margin: 0.15rem 0 0.15rem 0rem;
        }

        .last {
            justify-content: space-between;
        }

        .luck {
            margin: 0.15rem 0 0 1.83rem;
            border-radius: 50%;
            width: 2.45rem;
            height: 2.45rem;
            background-color: white;
        }
        /*loading框*/

        .loading {
            width: 35%;
            height: 6.4rem;
            position: fixed;
            ;
            top: 40%;
            left: 35%;
            margin: 0 auto;
            border-radius: 0.7rem;
            line-height: 6.4rem;
            text-align: center;
            color: #fff;
            background: #000;
            opacity: 0.7;
        }

        .content .btn {
            position: fixed;
            width: 93%;
            height: 4rem;
            background-color: #ee6a20;
            line-height: 4rem;
            text-align: center;
            color: #fff;
            margin: 0 auto;
            font-size: 1.5rem;
            letter-spacing: 0.03rem;
            margin-top: 17.25rem;
            border-radius: 1.98rem;
            bottom: 1rem;
            left: 0;
            right: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <header class="aui-bar aui-bar-nav aui-bar-light inner_header">
            <a class="aui-pull-left aui-btn" onclick="goBack()">
                <img src="../../../../image/back.png">
            </a>
            <div class="aui-title">添加收货地址</div>
        </header>
        <div class="content">
            <div class="content_list one">
                <div class="content_li">
                    收货人:
                    <input type="text" placeholder="请输入姓名" @input="clickInput($event,'name')" v-model="consignee">
                </div>
                <div class="content_li only">
                    联系电话:
                    <input type="text" placeholder="请输入联系电话" class="number" @input="clickInput($event,'phone')" maxlength="11" v-model="telephone">
                </div>
            </div>
            <div class="content_list two">
                <div class="content_li address" id="addressView" @click="test()">
                    所在地区:          {{province}}{{city}}{{district}}
                     <!-- <span v-for="(item,key) in datalist">{{item.name}} </span> -->
                    <!-- 所在地区： -->
                    <img src="../../../../image/capital/icon4.png" alt="">
                </div>
                <div class="content_li">
                    详细地址:
                    <input type="text" placeholder="街道、楼牌号等" class="number" @input="clickInput($event,'address_details')"  v-model="address">
                </div>
                <div class="only">
                    标签:
                    <input type="checkbox" class="aui-checkbox" @click="clickHome($event)">家
                    <input type="checkbox" class="aui-checkbox" @click="clickCompany($event)">公司
                </div>
            </div>
            <div class="content_list">
                <div class="content_li last">
                    设为默认地址
                    <div class="onbox" @click="clickZreo" ref="refonbox">
                        <div class="zreo" ref="refpos"></div>
                    </div>
                </div>
            </div>
            <div class="loading" v-if="creatimg">
                <!-- <img src="../../../../image/capital/loading.png" alt="" > -->
                {{loading}}
            </div>
            <div class="btn" @click="go_url('my_information','./my_information.html')">保存</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../../../script/api.js"></script>
<script type="text/javascript" src="../../../../script/zepto.js"></script>
<script type="text/javascript" src="../../../../script/vue.min.js"></script>
<script type="text/javascript" src="../../../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../../../script/utils.js"></script>
<script type="text/javascript" src="../../../../script/common.js"></script>
<script type="text/javascript" src="../../../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../../../script/axios.min.js"></script>
<script type="text/javascript" src="../../../../script/axios-config.js"></script>
<script type="text/javascript">
    apiready = function() {
        new Vue({
            el: "#app",
            data: {
                val_list: {
                    name: "",
                    phone: ""
                },
                value: '',
                city: '',
                district: '',
                datalist: [],
                is_default: 0,
                consignee: '',
                province: '',
                telephone: '',
                address: '',
                // 地址id
                address_id: '',
                // 判断地址列表是为为空,
                statused: '',
                // 如果首次进入没有设置默认地址
                creatimg: false,
                // loading框
                loading:''
            },
            methods: {
                test: function() {
                    var that = this
                    var addressView = api.require('addressView');
                    addressView.open({
                        file_addr: 'widget://res/district.txt', //数据源地址
                        selected_color: '#ff0000', //颜色
                        pro_id: 410000, //省id
                        city_id: 410100, //市id
                        dir_id: 410104 //区id
                    });

                    addressView.show({}, function(ret, err) {
                        if (ret.status) {
                            console.log(JSON.stringify(ret)); //返回值
                            // that.datalist=ret.data
                            that.province=ret.data[0].name
                            that.city=ret.data[1].name
                            that.district=ret.data[2].name
                        }
                    });
                },
                clickHome: function(e) {
                    console.log(e)
                    var check = e.target.checked
                    if (check == true) {
                        this.value = '家'
                        // console.log(this.value)
                    }
                },
                clickCompany: function(e) {
                    console.log(e)
                    var check = e.target.checked
                    if (check == true) {
                        this.value = '公司'
                        // console.log(this.value)
                    }
                },
                clickInput: function(e, key) {
                    // console.log(e)
                    // console.log(this.province)
                    var val_list = this.val_list
                    var value = e.target.value;
                    // console.log(value)
                    val_list[key] = value
                    var datalist = this.datalist
                    // console.log(datalist)
                },
                clickZreo: function() {
                    if (this.$refs.refonbox.className == "onbox") {
                        this.is_default = 1
                        this.$refs.refpos.className = "luck"
                        this.$refs.refonbox.className = "onbox2"
                        console.log(this.$refs.refonbox.className)
                    } else if (this.$refs.refonbox.className == "onbox2") {
                        this.is_default = 0
                        this.$refs.refpos.className = "zreo"
                        this.$refs.refonbox.className = "onbox"
                    }

                },
                go_url: function(name, url) {

                      var token = $api.getStorage('token');
                      var consignee = this.consignee
                      var telephone = this.telephone
                      var province = this.province
                      var city = this.city
                      var district = this.city
                      var address = this.address
                      var is_default = this.is_default
                      var address_id = this.address_id
                      console.log(this.address_id)
                          // 如果是编辑进来，就走第一个if分支
                          if (address_id) {
                              var data = {
                                  token: token,
                                  consignee: consignee,
                                  telephone: telephone,
                                  province: province,
                                  city: city,
                                  district: district,
                                  address: address,
                                  is_default: is_default,
                                  address_id: address_id
                              }
                          } else {

                              var statused = this.statused
                              if (statused == 0 && is_default == 0) {
                                  this.creatimg = true
                                  this.loading='请设置默认地址'
                                  setTimeout(() => {
                                      this.creatimg = false

                                  }, 1000)
                              } else {
                                  var data = {
                                      token: token,
                                      consignee: consignee,
                                      telephone: telephone,
                                      province: province,
                                      city: city,
                                      district: district,
                                      address: address,
                                      is_default: is_default
                                  }
                              }

                    }




                    // 新增地址
                    Axios.post(window.Url.add_edit_address, data).then(function(res) {
                        console.log(JSON.stringify(res));
                        if (res.status == 1) {
                            api.sendEvent({
                                name: 'update_user_address',
                                extra: {
                                    info: "updata_address"
                                }
                            });
                            api.closeWin({});

                        }
                    })
                }
            },
            mounted: function() {
                // console.log(api.pageParam.name)
                var token = $api.getStorage('token');
                console.log(token)
                var data = {
                    token: token
                }
                var that = this
                Axios.post(window.Url.address_list, data).then(function(res) {
                    // console.log(JSON.stringify(res));
                    if (res.status == 0) {
                        that.statused = res.status
                            // console.log(that.status)
                    }
                })
                var that = this
                if (api.pageParam.name) {
                    var address_id = that.address_id
                    address_id = api.pageParam.name
                    var token = $api.getStorage('token');
                    var data = {
                        token: token,
                        address_id: address_id
                    }

                    Axios.post(window.Url.address_deatil, data).then(function(res) {
                        console.log(JSON.stringify(res));
                        if (res.status == 1) {
                            // var consignee = this.consignee


                            that.consignee = res.info.consignee
                            that.telephone = res.info.telephone
                            that.province = res.info.province
                            that.city = res.info.city
                            that.district = res.info.district
                            that.address = res.info.address
                            that.is_default = res.info.is_default
                            that.address_id = res.info.address_id
                            if (res.info.is_default == 0) {
                                that.$refs.refpos.className = "zreo"
                                that.$refs.refonbox.className = "onbox"
                            } else if (res.info.is_default == 1) {
                                that.$refs.refpos.className = "luck"
                                that.$refs.refonbox.className = "onbox2"
                            }
                        }
                    })
                }
            }
        })


    };

    function goBack() {
        api.closeWin({

        });
    };
</script>

</html>
